<script lang="ts" setup>
import { bookModel, IBook } from '@/api/book/listType';
import { FormConfig } from '@/components/Form/types';
import { NInput } from 'naive-ui';
import { computed, ref, unref } from 'vue';
import BookTypeSelect from '@/components/BookTypeSelect/index.vue';
import Upload from '@/components/Upload/index.vue';

interface Props {
  data: Partial<IBook>
}
const props = defineProps<Props>();
const emits = defineEmits(['close', 'submit']);
const formData = ref<Partial<IBook>>({
  bookName: '',
  typeId: null,
  stock: 0,
  cover: '',
  ...props.data
});

const config = computed<FormConfig<typeof formData.value>[]>(() => {
  return [
    {
      type: 'component',
      label: '书籍名称:',
      component: NInput,
      key: 'bookName',
      itemProps: {
        rule: [
          { required: true, validator(rule, value) {
            if(!value) {
              return new Error('书籍名称不能为空！');
            }
            return true;
          }, trigger: 'blur' }
        ]
      }
    },
    {
      type: 'component',
      label: '作者:',
      component: NInput,
      key: 'author',
      itemProps: {
        rule: [
          { required: true, validator(rule, value) {
            if(!value) {
              return new Error('作者不能为空！');
            }
            return true;
          }, trigger: 'blur' }
        ]
      }
    },
    {
      type: 'component',
      label: '书籍类型:',
      component: BookTypeSelect,
      key: 'typeId',
      itemProps: {
        rule: [
          { required: true, validator(rule, value) {
            if(!value) {
              return new Error('请选择书籍类型!');
            }
            return true;
          }, trigger: 'blur' }
        ]
      }
    },
    {
      type: 'component',
      label: '封面图:',
      component: Upload,
      key: 'cover',
      itemProps: {
        rule: [
          { required: true, validator(rule, value) {
            if(!value) {
              return new Error('请选择封面图!');
            }
            return true;
          }, trigger: 'blur' }
        ]
      }
    },
    {
      type: 'component',
      label: '库存:',
      component: NInput,
      key: 'stock',
      itemProps: {
        rule: [
          { required: true, validator(rule, value) {
            if(!value) {
              return new Error('请填写库存!');
            }
            return true;
          }, trigger: 'blur' }
        ]
      }
    },
    {
      type: 'slot',
      slotName: 'submit'
    }
  ];
});

const bookUpgradeForm = ref();

async function submit() {
  await bookUpgradeForm.value.validate();
  const params = {
    ...unref(formData)
  };
  await bookModel.upgrade(params);
  emits('submit');
}

</script>
<template>
  <div>
    <Form
      ref="bookUpgradeForm"
      v-model:data="formData"
      :label-width="90"
      :config="config"
    >
    <template #submit>
        <div class="flex justify-end gap-mini">
          <NButton @click="emits('close')">
            取消
          </NButton>
          <NButton type="primary" @click="submit">
            确定
          </NButton>
        </div>
      </template>
    </Form>
  </div>
</template>
